<template>
  <div class="test-container">
    <h1>背景图片测试</h1>
    <p>如果背景显示正常，说明图片路径和CSS设置正确。</p>
    <div class="background-test">
      <div class="content">
        <h2>测试内容</h2>
        <p>这是测试文字</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.test-container {
  width: 100vw;
  min-height: 100vh;
  background: #ffffff;
}

.background-test {
  width: 100%;
  height: 100vh;
  background: #ffffff;
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 10px;
}
</style>